import { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min";
import JzzyHandle from "../../../../../../utils/apis/JzzyHandle";
import { Button, Card, Form, Select, Input } from "antd";
import ScrollTable from "../../../../../common/ScrollTable";

export default function JzzyLook() {
    const [rowDatas, setRowDatas] = useState();
    const [componentDisabled, setComponentDisabled] = useState(true);
    const [dynamicForms, setDynamicForms] = useState();
    const [idDatas, setIdDatas] = useState();
    const id=useParams()?.id;
    useEffect(() => {
        JzzyHandle.jzzyLookDynamicApi().then(datas => {
          setDynamicForms(datas)
        })
      }, [])
      useEffect(() => {
        JzzyHandle.list(id).then(resp => {
       
          setIdDatas(resp.data)
    
        })
      }, [id])
    
    const history=useHistory();
    const quxiaoHandle=()=>{
        history.push(`/manager/jzzy`)
    }


  return <div className="layout-h h100" style={{ overflow: "scroll" }}>
    <Card className="h100-h fill">
      <Form method="post" >
        <div>
          <header style={{
            fontSize: 20,
            fontWeight: "bold"
          }}>调查对象数据</header>
        </div><hr />
        <div className="InputForm" style={{
          flex:"flex",
          flexWrap:"wrap"
        }}>
          {idDatas !== undefined && dynamicForms !== undefined && dynamicForms.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                node = <Select></Select>;
                break;
              case 'text':
              default:
                node = <Input

                  disabled={componentDisabled}
                  style={{
                    width: '90%',
                    fontSize: '15px',
                    color: '#fffff',
                    fontWeight: 'bold',
                    backgroundColor: 'transparent',
                    //opacity: '0.5'

                  }}
                  onChange={(e) => {

                  }}
                //   rules={[
                //     {disable:true}
                //   ]}
                />
            }
            const initialValue = idDatas[formItem.name] !== undefined ? idDatas[formItem.name] : undefined
            return <div style={{
              flexBasis:"33%",
              marginBottom:"10px"
            }}><Form.Item
              label={formItem.alias}
              name={formItem.name}
              initialValue={initialValue}
              //   disabled={componentDisabled}
              rules={[
                {
                  //   required: true,
                  disable: true

                }
              ]}

            >
              {node}
            </Form.Item>
            </div>
          })}

        </div>
        <div className="btn-bottom">
          {/* <Button type="primary">上一条</Button>
          <Button type="primary">下一条</Button> */}
          <Button onClick={quxiaoHandle} type="primary">返回</Button>
        </div>
      </Form>
    </Card>
  </div>
}